<template>
<el-container>
    <el-main>
        <el-row :gutter="20">
          <el-col :span="8" v-for="book in $store.state.ebooks">
              <el-avatar :src=book.cover shape="square" :size="50" style="float:left;margin:15px"></el-avatar>
              <div>
                <a class="meta-title" href="#">{{book.name}}</a>
                <span class="des">{{book.description}}</span>
              </div>
              <ul class="list-action">
                <li>
                  <i class="el-icon-document"></i>&nbsp;&nbsp;7
                   <span class="list-item-action-split"></span>
                </li>
               
                <li>
                  <i class="el-icon-user"></i>&nbsp;&nbsp;7
                  <span class="list-item-action-split"></span>
                </li>
                
                <li><i class="el-icon-star-off"></i>&nbsp;&nbsp;7</li>
              </ul>
          </el-col>
        </el-row>
    </el-main>
</el-container>
</template>
<script>
export default {
    name:"Home"
}
</script>
<style  lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .meta-title{
    display: block;
    color: black;
    margin: 15px;
  }

.meta-title:hover{
  color: #1890ff;
}


  .des{
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    margin-bottom: 15px;
  }
  .list-action{
    padding: 0;
    color: gray
  }
  .list-action li{
    width: 50px;
    margin-left: 10px;
    float: left;
  }
</style>